<template>
  <div class="tag-select">
    <div class="tag-input">
      <el-tag
        closable
        disable-transitions
        size="middle"
        effect="dark"
        v-for="(item, index) in value"
        :key="index"
        @close="delOuterTag(index)"
      >
        {{ item.tagname }}
      </el-tag>
      <el-input
        v-model="newVal"
        @keydown.native="del"
        @keyup.enter.native="addTag({ tagname: newVal })"
        placeholder="按回车键Enter创建标签"
      ></el-input>
    </div>
    <div class="tag-list">
      <el-tag
        v-for="(tag, index) in tagList"
        effect="dark"
        size="middle"
        :key="index"
        :type="type[index % 5]"
        @click="addTag(tag)"
      >
        {{ tag.tagname }}
      </el-tag>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Array,
        default: () => [],
      },
      limit: {
        type: Number,
        default: 10000,
      },
    },
    data() {
      return {
        outerValue: this.value,
        tagList: [],
        type: ['success', 'primary', 'info', 'warning', 'danger'],
        newVal: '',
      };
    },
    watch: {
      value() {
        this.outerValue = this.value;
      },
    },
    mounted() {
      this.getTagList();
    },
    methods: {
      /**
       * 获取所有的tag list
       */
      getTagList() {
        this.$service.AssetTagAll().then((res) => {
          this.tagList = res;
        });
      },
      /**
       * 新增一个tag
       */
      addTag(tag) {
        if (this.outerValue.length >= this.limit) {
          this.$message.error('够了够了,标签足够多了!');
          return;
        }
        if (!tag.tagname) return;
        if (!this.hasIt(this.tagList, tag.id)) {
          this.$service
            .AssetTagCreate({
              tagname: tag.tagname,
            })
            .then((res) => {
              this.getTagList();
              this.outerValue.push({
                id: res,
                tagname: tag.tagname,
              });
              this.$emit('input', this.outerValue);
              this.newVal = '';
            });
        } else if (!this.hasIt(this.outerValue, tag.id)) {
          this.outerValue.push(tag);
          this.$emit('input', this.outerValue);
          this.newVal = '';
        }
      },
      /**
       * 删除最后一个
       */
      del(evt) {
        if (evt.keyCode === 8 && this.newVal === '') {
          this.outerValue.pop();
          this.$emit('input', this.outerValue);
        }
      },
      /**
       * 删除某一个
       */
      delOuterTag(index) {
        this.outerValue.splice(index, 1);
        this.$emit('input', this.outerValue);
      },
      /**
       * 查看是否已有这个tag
       */
      hasIt(list, val) {
        return !!list.find((tag) => tag.id === val);
      },
    },
  };
</script>

<style lang="less" scoped>
  .tag-input {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border: 1px solid #dcdfe6;
    padding: 5px 10px;
    border-radius: 4px;

    /deep/ .el-tag {
      margin-bottom: 5px;
    }

    /deep/ .el-input {
      flex: 1;
    }

    /deep/ .el-input .el-input__inner {
      border: transparent;
      margin-left: 10px;
      height: 32px;
    }
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;

    .el-tag {
      min-width: 40px;
      text-align: center;
      transition: all 0.1s;

      &:hover {
        box-shadow: 0 0 10px #0004;
        border: 1px solid #fffd;
      }
    }
  }

  .el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
</style>
